<template>
	<view>
		<slot name="navbar"></slot>
		<view class="zq-page"
			:style="{
				'width':boxWidth,
				'heigth':boxHeight,
				'padding':boxPadding,
				'minHeight':minHeight
			}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			width:{
				default:'750rpx',
				type:String
			},
			height:{
				default:'unset',
				type:String
			},
			padding:{
				default:"0",
				type:String
			}
		},
		watch:{
			width(nVal){
				this.boxWidth = nVal;
			},
			height(nVal){
				this.boxHeight = nVal;
				this.minHeight = nVal != "unset" ? "unset" : this.screenHeight + 'px';
			},
			padding(nVal){
				this.boxPadding = nVal;
			}
		},
		data(){
			return{
				boxWidth:'0rpx',
				boxHeight:"unset",
				minHeight:0,
				boxPadding:"",
				screenHeight:0
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (event) => {
					this.screenHeight = event.screenHeight;
					this.minHeight = this.height != "unset" ? "unset" : event.screenHeight + 'px';
					this.boxWidth = this.width;
					this.boxHeight = this.height;
					this.boxPadding = this.padding;
				}
			})
		}
	}
</script>

<style scoped>
	.zq-page{overflow: hidden;box-sizing: border-box;}
</style>
